// 导入three.js
import * as THREE from 'three';
// 导入轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(
  45, // 视角
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近平面 - 最近处
  1000, // 远平面 - 最远处
); 

// 创建世界坐标辅助器 - 线段长度 
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// 创建渲染器
const renderer = new THREE.WebGLRenderer(); 
// 设置渲染器大小（画布大小）
renderer.setSize(window.innerWidth, window.innerHeight);
// 将画布添加到body
document.body.appendChild(renderer.domElement);
// TODO 此时页面中就存在一个canvas元素

// 创建几何体
const geometry = new THREE.BoxGeometry();
// 创建材质 - 初始化材质颜色
const material = new THREE.MeshBasicMaterial({ color: 'ffffff00' });
// 创建网格 - 结合几何体+材质，创建具体"物体"
const cube = new THREE.Mesh(geometry, material);
// 将网格(物体|元素)添加到场景中
scene.add(cube);

// 设置相机位置（视角）
// TODO 如何理解X\Y\Z轴？
// 以相机（眼球）为基点，距离元素的距离，就是x轴，向上的距离则是y轴，向左的距离是Z轴
camera.position.z = 5;
camera.position.y = 5;
camera.position.x = 10;
camera.lookAt(0, 0, 0);

// 添加轨道控制器
// TODO 控制相机（视角-眼球） 以及通过什么dom元素来触发 比如renderer的canvas
const controls = new OrbitControls(camera, document.querySelector('.controls-box'));
// 开启阻尼
controls.enableDamping = true;
// 设置阻尼系数 0-1
controls.dampingFactor = 0.01;
// 设置自动旋转
controls.autoRotate = true;

// 通过重绘定时器定时执行 渲染内容
function animate() {
  controls.update(); // 更新控制器
  requestAnimationFrame(animate);
  // 旋转
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  // 渲染
  renderer.render(scene, camera);
};
animate();